<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>c03-conditions</title>
  </head>
  <body>
    <div id="app">
      <!-- 1. v-if-else -->
      <form action="#">
        <button type="button" @click="isLogin = !isLogin">登陆/注册</button>
        <!-- 登陆 -->
        <div v-show="isLogin">
          <p><input type="text" placeholder="请输入账号"></p>
          <p><input type="password" placeholder="请输入密码"></p>
          <button type="button">登陆</button>
        </div>
        <!-- 注册 -->
        <div v-show="!isLogin">
          <p><input type="text" placeholder="请输入账号"></p>
          <p><input type="password" placeholder="请输入密码"></p>
          <button type="button">注册</button>
        </div>
      </form>
      <!-- 2. key -->
      <div style="margin-top: 100px;">
        <template v-if="loginType == 'tel'">
          <span>手机：</span>
          <input type="tel" placeholder="请输入手机号" key="tel">
        </template>
        <template v-else>
          <span>邮箱：</span>
          <input type="email" placeholder="请输入邮箱" key="email">
        </template>
        <button type="button" @click="toggleLoginType">切换登陆方式</button>
      </div> 
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>
